//7.事项TOP10--echarts
/*参数data:
var data = {
  name:['事项111', '事项1sd', '事项1sdfsd', '事项1水电费', '事项1电饭锅', '事项1暗室逢灯', '事项7', '事项8', '事项9', '事项10'],
  value:[600, 550, 520, 501, 486, 475, 470, 466, 420, 376]
};
*/

var MD07 = {
  f1:12*KO,
  f2:16*KO,
  W:0,
  H:0,
  md:null,
  init:function(el,data){
    if(el){
      this.W = el.offsetWidth;
      this.H = el.offsetHeight;
    }
    // if(this.md){
    //   this.md.setOption({
    //     series: [
    //       { data: data.zhu1 }, 
    //       { data: data.zhu2 }, 
    //       { data: data.zhu3 }
    //     ]
    //   })
    //   return false;
    // }else{
      this.myecharts(el,data)
    // }
  },
  myecharts: function(el,data) {   
    // 指定图表的配置项和数据
    var option = {
        // "backgroundColor": "rgb(20, 58, 110)",
        "color": ["#3cefff"],
        tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow',
              label:{
                show:true,
                backgroundColor: '#FFED27',
                fontSize:this.f1,
                color:'#001A53'                  
              }
            },
            textStyle:{
              fontSize:this.f2
            },
            formatter:'{b}：<span style="color:#FFED27;">{c}件</span>',
            padding:[5*KO,10*KO]
        },
        grid: {
          top: "21%",
          left: '12%', //折线框左边距
          right: '0%', //折线框右边距
          bottom: '15%', //折线框下边距
          // containLabel: true
        },
        "xAxis": [{
            "type": "category",
            "data": data.name,
            "axisTick": {
                "alignWithLabel": true
            },
            "nameTextStyle": {
                "color": "#82b0ec"
            },
            "axisLine": {
                "lineStyle": {
                    "color": "#82b0ec"
                }
            },
            "axisLabel": {
                interval:0,      //强制显示所有刻度标签
                margin:10*KO,       //刻度标签与轴线之间的距离。
                "textStyle": {
                    "color": "#82b0ec",
                    fontSize:this.f1
                }
            }
        }],
        "yAxis": [{
            "type": "value",
            "axisLabel": {
                "textStyle": {
                    "color": "#82b0ec",
                    fontSize:this.f1
                },
                // "formatter": "{value}%"
            },
            "splitLine": {
                "lineStyle": {
                    "color": "rgba(255,255,255,0.12)"
                }
            },
            "axisLine": {
                "show": false
            }
        }],
        "series": [{
            "name": "",
            "type": "pictorialBar",
            "symbolSize": [20*KO, 10*KO,],
            "symbolOffset": [0, -5*KO,],
            "symbolPosition": "end",
            "z": 12,
            "label": {
                "normal": {
                    "show": true,
                    "position": "top",
                    "formatter": "{c}件",
                    fontSize: this.f1
                }
            },
            "data": data.value
        }, {
            "name": "",
            "type": "pictorialBar",
            "symbolSize": [20*KO, 10*KO,],
            "symbolOffset": [0, 5*KO,],
            "z": 12,
            "data": data.value
        }, 
        {
            "type": "bar",
            "itemStyle": {
                "normal": {
                    "opacity": 0.7
                }
            },
            "barWidth": 20*KO,
            "data": data.value,
          //   "markLine": {
          //       "silent": true,
          //       "symbol": "none",
          //       "label": {
          //           "position": "middle",
          //           "formatter": "{b}"
          //       },
          //       "data": [{
          //           "name": "目标值",
          //           "yAxis": 80,
          //           "lineStyle": {
          //               "color": "#ffc832"
          //           },
          //           "label": {
          //               "position": "end",
          //               "formatter": "{b}\n {c}%"
          //           }
          //       }]
          // }
        }]
    }

    // 基于准备好的dom，初始化echarts实例
    this.md = echarts.init(el);
    // 使用刚指定的配置项和数据显示图表。
    this.md.setOption(option);
  }
}


















